@use "../../../vars";

.tag_top_tracks {
  position: relative;
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 510px;

  .track {
    transition: vars.$short-duration;
  }

  .track_thumbnail {
    width: 3rem;
    height: 3rem;
  }

  .add_all_button {
    margin-right: 0;
    margin-bottom: 0.5em;

    max-width: 50%;
  }

  .track_table_wrapper {
    margin-right: 1em;
  }

  table {
    width: 100%;
  }

  thead {
    background: vars.$background2;
  }

  th {
    padding: 1rem;
    text-align: left;
  }

  tr {
    transition: vars.$short-duration;
  }

  tr:hover {
    background: rgba(vars.$background2, 0.25);
  }

  td {
    padding: 1rem 1rem;
    border-bottom: 1px solid vars.$background2;
  }
}
